<template>
  <div>
    <div class="view-style-title">任务基础设置</div>
    <el-form ref="ruleForm" :model="baseform" :rules="rules" label-width="120px" class="demo-form-inline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称">
            <el-input v-model="baseform.taskName" style="width:100%" placeholder="任务名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型" prop="taskType">
            <el-select v-model="baseform.taskType" placeholder="任务类型">
              <el-option value="1" label="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务模版" prop="taskModelId">
            <el-select v-model="baseform.taskModelId" placeholder="请选择">
              <el-option value="1" label="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" prop="linkMan">
            <el-input v-model="baseform.linkMan" placeholder="联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务时间" prop="planStartTime">
            <el-date-picker v-model="baseform.planStartTime" type="date" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="linkTel">
            <el-input v-model="baseform.linkTel" placeholder="联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务地址" prop="taskPlace">
            <el-input v-model="baseform.taskPlace" placeholder="任务地址" style="width:420px" readonly>
              <el-button slot="append" icon="el-icon-map-location" @click="OpenMap" />
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务详情" prop="workContent">
            <el-input
              v-model="baseform.workContent"
              type="textarea"
              maxlength="200"
              show-word-limit
              placeholder="任务详情"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button style="margin-top: 12px;" type="primary" @click="next('ruleForm')">下一步</el-button>

    <el-dialog
      title="地图"
      :visible.sync="dialog"
      width="45%"
    >
      <dialogmap ref="dialogmap" height="320px" :maplist="mapmake" @mapdata="getMapdata" />
    </el-dialog>
  </div>
</template>

<script>
const baseform = {
  taskName: '',
  taskType: '',
  taskModelId: '',
  linkMan: '',
  planStartTime: '',
  linkTel: '',
  taskPlace: '',
  workContent: ''
}
import { rules } from '../rules'
import dialogmap from '@/components/leaflet'
export default {
  components: {
    dialogmap
  },
  data() {
    return {
      baseform: Object.assign({}, baseform),
      rules: rules,
      dialog: false,
      latlng: null,
      mapmake: []
    }
  },
  mounted() {
    // this.baseform = { ...Object.assign({}, baseform, this.$store.state.request.request_data) }
  },
  methods: {
    OpenMap() {
      this.dialog = true
      if (this.baseform.taskPlace.indexOf(',') !== -1) {
        let taskPlace = this.baseform.taskPlace.split(',')
        taskPlace = taskPlace.map(Number)
        this.latlng.lat = taskPlace[0]
        this.latlng.lng = taskPlace[1]
        this.mapmake = [this.latlng]
      }
    },
    getMapdata(e) {
      const { latlng } = e
      this.latlng = latlng
      this.mapmake = [latlng]
      this.baseform.taskPlace = latlng.lat + ',' + latlng.lng
    },
    next(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.commit('request/SET_STEPS', 2)
          this.$store.commit('request/REQ_FORM', this.baseform)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
